﻿@using WanFang.Test
@{
    Layout = "~/Views/Shared/_TestLayout.cshtml";
}
@section headSec{
    <script src="~/Content/echarts/echarts.min.js"></script>
    <script src="~/Content/echarts/dataTool.js"></script>
    <script src="~/Content/flot/jquery.flot.min.js"></script>
    <script>
        function makeData() {
            $.ajax({
                type: "post",
                url: '/TestDraw/MakeData',
                data: { '__RequestVerificationToken':  $('@Html.AntiForgeryToken()').val() },
                dataType: "json",
                success: function (data) {
                    if (data.result.errcode == 0) {
                            alert("success")
                    } else {
                        alert(data.result.errmsg);
                    }
                }
            });
        }
    </script>
}
<div class="row">
    <div class="col-sm-12">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h5 id="pHead">仪表盘：</h5>
                <div class="ibox-tools">
                    <button class="btn btn-success " type="button" onclick="makeData()"><i class="fa fa-plus"></i>&nbsp;生成数据</button>
                </div>
            </div>
            <div class="ibox-content">
                <div id="ybpDraw" style="width:90%;height:400px;"></div>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-sm-12">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h5 id="pHead">flot：</h5>
                <div class="ibox-tools">
                </div>
            </div>
            <div class="ibox-content">
                <div id="flotDraw" style="width:90%;height:400px;"></div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-sm-12">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h5 id="pHead">股票：</h5>
                <div class="ibox-tools">
                </div>
            </div>
            <div class="ibox-content">
                <div id="gpDraw" style="width:90%;height:400px;"></div>
            </div>
        </div>
    </div>
</div>
<script>
    var option1 = {
        tooltip: {
            formatter: "{a} <br/>{c} {b}"
        },
        toolbox: {
            show: true,
            feature: {
                restore: { show: true },
                saveAsImage: { show: true }
            }
        },
        series: [
            {
                name: '实时温度',
                type: 'gauge',
                z: 3,
                min: 0,
                max: 100,
                splitNumber: 11,
                radius: '50%',
                axisLine: {            // 坐标轴线
                    lineStyle: {       // 属性lineStyle控制线条样式
                        width: 10
                    }
                },
                axisTick: {            // 坐标轴小标记
                    length: 15,        // 属性length控制线长
                    lineStyle: {       // 属性lineStyle控制线条样式
                        color: 'auto'
                    }
                },
                splitLine: {           // 分隔线
                    length: 20,         // 属性length控制线长
                    lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                        color: 'auto'
                    }
                },
                axisLabel: {
                    backgroundColor: 'auto',
                    borderRadius: 2,
                    color: '#eee',
                    padding: 3,
                    textShadowBlur: 2,
                    textShadowOffsetX: 1,
                    textShadowOffsetY: 1,
                    textShadowColor: '#222'
                },
                title: {
                    // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                    fontWeight: 'bolder',
                    fontSize: 20,
                    fontStyle: 'italic',
                    offsetCenter: [0,'-120%']
                },
                detail: {
                    // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                    formatter: function (value) {
                        value = (value + '').split('.');
                        value.length < 2 && (value.push('00'));
                        return ('00' + value[0]).slice(-2)
                            + '.' + (value[1] + '00').slice(0, 2);
                    },
                    fontWeight: 'bolder',
                    borderRadius: 3,
                    backgroundColor: '#444',
                    borderColor: '#aaa',
                    shadowBlur: 5,
                    shadowColor: '#333',
                    shadowOffsetX: 0,
                    shadowOffsetY: 3,
                    borderWidth: 2,
                    textBorderColor: '#000',
                    textBorderWidth: 2,
                    textShadowBlur: 2,
                    textShadowColor: '#fff',
                    textShadowOffsetX: 0,
                    textShadowOffsetY: 0,
                    fontFamily: 'Arial',
                    width: 100,
                    color: '#eee',
                    rich: {}
                },
                data: [{ value: 40, name: '实时温度' }]
            },
            {
                name: '实时流量',
                type: 'gauge',
                center: ['20%', '55%'],    // 默认全局居中
                radius: '35%',
                min: 0,
                max: 30000,
                endAngle: 45,
                splitNumber: 7,
                axisLine: {            // 坐标轴线
                    lineStyle: {       // 属性lineStyle控制线条样式
                        width: 8
                    }
                },
                axisTick: {            // 坐标轴小标记
                    length: 12,        // 属性length控制线长
                    lineStyle: {       // 属性lineStyle控制线条样式
                        color: 'auto'
                    }
                },
                splitLine: {           // 分隔线
                    length: 20,         // 属性length控制线长
                    lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                        color: 'auto'
                    }
                },
                pointer: {
                    width: 5
                },
                title: {
                    offsetCenter: [0, '-120%'],       // x, y，单位px
                },
                detail: {
                    // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                    fontWeight: 'bolder'
                },
                data: [{ value: 1.5, name: '实时流量（X1000升）' }]
            },
            {
                name: '实时罐内压力',
                type: 'gauge',
                center: ['77%', '50%'],    // 默认全局居中
                radius: '25%',
                min: 0,
                max: 0.3,
                startAngle: 135,
                endAngle: 45,
                splitNumber: 2,
                axisLine: {            // 坐标轴线
                    lineStyle: {       // 属性lineStyle控制线条样式
                        width: 8
                    }
                },
                axisTick: {            // 坐标轴小标记
                    splitNumber: 5,
                    length: 10,        // 属性length控制线长
                    lineStyle: {        // 属性lineStyle控制线条样式
                        color: 'auto'
                    }
                },
                axisLabel: {
                    formatter: function (v) {
                        switch (v + '') {
                            case '0': return 'E';
                            case '1': return 'Gas';
                            case '2': return 'F';
                        }
                    }
                },
                splitLine: {           // 分隔线
                    length: 15,         // 属性length控制线长
                    lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                        color: 'auto'
                    }
                },
                pointer: {
                    width: 2
                },
                title: {
                    offsetCenter: [0, '-120%'],       // x, y，单位px
                },
                detail: {
                    show: false
                },
                data: [{ value: 0.5, name: '实时罐内压力' }]
            },
            {
                name: '实时夹套压力',
                type: 'gauge',
                center: ['77%', '50%'],    // 默认全局居中
                radius: '25%',
                min: -0.1,
                max: 0.3,
                startAngle: 315,
                endAngle: 225,
                splitNumber: 2,
                axisLine: {            // 坐标轴线
                    lineStyle: {       // 属性lineStyle控制线条样式
                        width: 8
                    }
                },
                axisTick: {            // 坐标轴小标记
                    show: false
                },
                axisLabel: {
                    formatter: function (v) {
                        switch (v + '') {
                            case '0': return 'H';
                            case '1': return 'Water';
                            case '2': return 'C';
                        }
                    }
                },
                splitLine: {           // 分隔线
                    length: 15,         // 属性length控制线长
                    lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                        color: 'auto'
                    }
                },
                pointer: {
                    width: 2
                },
                title: {
                    offsetCenter: [0, '120%'],       // x, y，单位px
                },
                detail: {
                    show: false
                },
                data: [{ value: 0.5, name: '实时夹套压力' }]
            }
        ]
    };

    setInterval(function () {
        $.ajax({
                type: "get",
                url: '/TestDraw/GetData',
                dataType: "json",
            success: function (data) {
                console.log(data);
                    option1.series[0].data[0].value = data.Wd;
                option1.series[1].data[0].value = data.Cyll;
                    option1.series[2].data[0].value = data.GnYl;
                option1.series[3].data[0].value = data.JtYl;
                    myChart1.setOption(option1, true);
                }
            });
    }, 2000);

    var myChart1 = echarts.init(document.getElementById('ybpDraw'));
    myChart1.setOption(option1);

    //flot


    // We use an inline data source in the example, usually data would
    // be fetched from a server

    var data1 = [],
        totalPoints = 300;

    function getRandomData() {

        if (data1.length > 0)
            data1 = data1.slice(1);

        // Do a random walk

        while (data1.length < totalPoints) {

            var prev = data1.length > 0 ? data1[data1.length - 1] : 50,
                y = prev + Math.random() * 10 - 5;

            if (y < 0) {
                y = 0;
            } else if (y > 100) {
                y = 100;
            }

            data1.push(y);
        }

        // Zip the generated y values with the x values

        var res = [];
        for (var i = 0; i < data1.length; ++i) {
            res.push([i, data1[i]])
        }

        return res;
    }

    // Set up the control widget

    var updateInterval = 30;
    var plot = $.plot("#flotDraw", [getRandomData()], {
        series: {
            shadowSize: 0	// Drawing is faster without shadows
        },
        lines: {
            fill: true
        },
        yaxis: {
            min: 0,
            max: 100
        },
        xaxis: {
            show: false
        }
    });

    function update() {

        plot.setData([getRandomData()]);

        // Since the axes don't change, we don't need to call plot.setupGrid()

        plot.draw();
        setTimeout(update, updateInterval);
    }

    update();


    // Generate data.
    var data = [];
    for (var seriesIndex = 0; seriesIndex < 5; seriesIndex++) {
        var seriesData = [];
        for (var i = 0; i < 18; i++) {
            var cate = [];
            for (var j = 0; j < 100; j++) {
                cate.push(Math.random() * 200);
            }
            seriesData.push(cate);
        }
        data.push(echarts.dataTool.prepareBoxplotData(seriesData));
    }


    var option = {
        title: {
            text: 'Multiple Categories',
            left: 'center',
        },
        legend: {
            y: '10%',
            data: ['category0', 'category1', 'category2', 'category3']
        },
        tooltip: {
            trigger: 'item',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            left: '10%',
            top: '20%',
            right: '10%',
            bottom: '15%'
        },
        xAxis: {
            type: 'category',
            data: data[0].axisData,
            boundaryGap: true,
            nameGap: 30,
            splitArea: {
                show: true
            },
            axisLabel: {
                formatter: 'expr {value}'
            },
            splitLine: {
                show: false
            }
        },
        yAxis: {
            type: 'value',
            name: 'Value',
            min: -400,
            max: 600,
            splitArea: {
                show: false
            }
        },
        dataZoom: [
            {
                type: 'inside',
                start: 0,
                end: 20
            },
            {
                show: true,
                height: 20,
                type: 'slider',
                top: '90%',
                xAxisIndex: [0],
                start: 0,
                end: 20
            }
        ],
        series: [
            {
                name: 'category0',
                type: 'boxplot',
                data: data[0].boxData,
                tooltip: { formatter: formatter }
            },
            {
                name: 'category1',
                type: 'boxplot',
                data: data[1].boxData,
                tooltip: { formatter: formatter }
            },
            {
                name: 'category2',
                type: 'boxplot',
                data: data[2].boxData,
                tooltip: { formatter: formatter }
            }
        ]
    };

    function formatter(param) {
        return [
            'Experiment ' + param.name + ': ',
            'upper: ' + param.data[0],
            'Q1: ' + param.data[1],
            'median: ' + param.data[2],
            'Q3: ' + param.data[3],
            'lower: ' + param.data[4]
        ].join('<br/>')
    }
    var myChart = echarts.init(document.getElementById('gpDraw'));
    myChart.setOption(option);
</script>
